<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <svg width="100" height="100">
        <line x1="5" y1="5" x2="50" y2="5" stroke="#000" stroke-width="5" stroke-linecap='square'>
    </svg>
    <svg width="100" height="100">
        <rect x="10" y="10" width="80" height="80" fill="rgba(255,0,0,.5)"></rect>
    </svg>

    <svg width="100" height="100">
        <rect x="10" y="10" width="80" height="80" fill="rgba(255,0,0,.5)" rx="30" ry="30"></rect>
    </svg>

    <svg width="100" height="100">
        <rect x="10" y="10" width="80" height="80" fill="rgba(255,0,0,.5)" stroke="rgba(255,0,0,.9)" stroke-width="5"
            fill-opacity=".5" stroke-opacity=".5"></rect>
    </svg>

    <svg>
        <polyline points="10,5 80,5 10,80 80,80" stroke="#000" fill="none"></polyline>
    </svg>
    <svg width="100" height="100">
        <circle cx="50" cy="50" r="40" stroke="orange" stroke-width="2" fill="yellow"></circle>
    </svg>

    <svg width="100" height="100">
        <ellipse cx="50%" cy="50%" rx="50" ry="40" fill="rgba(255,255,0,.5)"></ellipse>
    </svg>

    <svg width="100" height="100">
        <polygon points="50,0 0,100 100,100" stroke="rgba(255,0,0,.5)" fill="rgba(255,0,0,.5)"></polygon>
    </svg>

    <svg>
        <polygon points="0,0 100,0 0,100 100,100" stroke-width="2" stroke="#ccc" fill="yellow" fill-rule="nonzero">
        </polygon>
    </svg>

    <svg>
        <path stroke-width="5" stroke="orange" d="M 10 10 L 20 20"></path>
    </svg>

    <svg>
        <g>
            <text x="5" y="20">stroke 栗子～</text>
            <path stroke-width="10" stroke="orange" d="M 10 30 L 90 30"></path>
            <path stroke-width="10" stroke="orange" stroke-linecap="round" d="M 10 50 L 90 50"></path>
            <path stroke-width="10" stroke="orange" stroke-dasharray="3,4" d="M 10 70 L 90 70"></path>
        </g>
    </svg>
    <svg>
        <path d="M 50 0 L 0 100 L 100 100 L 50 0" stroke="#000" fill="none"></path>
    </svg>
    <svg>
        <text x="10" y="10" font-size="14" font-weight="bold" rotate="30" textlength="100">好棒棒耶～</text>
    </svg>
    <svg>
        <defs>
            <linearGradient x1="0%" y1="0%" x2="100%" y2="100%" id="linear1">
                <stop offset="0%" stop-color="pink" stop-opacity="1"></stop>
                <stop offset="100%" stop-color="skyblue" stop-opacity="1"></stop>
            </linearGradient>
        </defs>
        <ellipse cx="150" cy="75" rx="85" ry="55" style="fill: url(#linear1)"></ellipse>
    </svg>
    <svg>
        <defs>
            <linearGradient x1="0%" y1="0%" x2="0%" y2="100%" id="linear1">
                <stop offset="0%" stop-color="pink" stop-opacity="1"></stop>
                <stop offset="100%" stop-color="skyblue" stop-opacity="1"></stop>
            </linearGradient>
        </defs>
        <ellipse cx="150" cy="75" rx="85" ry="55" style="fill: url(#linear1)"></ellipse>
    </svg>
    <svg>
        <defs>
            //cx cy：颜色的起始点坐标 r：扩散范围 fx：渐变的终点
            <radialGradient id="radial1" cx="20%" cy="20%" r="60%" fx="50%">
                <stop offset="0%" stop-color="yellow" stop-opacity="1"></stop>
                <stop offset="100%" stop-color="orange" stop-opacity="1"></stop>
            </radialGradient>
        </defs>
        <ellipse cx="150" cy="75" rx="75" ry="75" style="fill: url(#radial1)"></ellipse>
    </svg>
    <svg>
        <a href="#">
            <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
        </a>
    </svg>
    <svg>
        <rect width="100" height="100" x="20" y="20" fill="blue">
            //repeatCount 持续时间
            <animate attributeName="opacity" from="1" to="0" dur="5s" repeatCount="indefinite"></animate>
        </rect>
    </svg>
    <svg>
        <rect x="20" y="20" width="100" height="100">
            <animate attributeName="width" from="100" to="150" dur="5s" repeatCount="indefinite"></animate>
            <animate attributeName="x" begin="0s" dur="5s" from="0" to="300" repeatCount="indefinite"></animate>
            <animate attributeName="fill" from="pink" to="orange" begin="0s" dur="4s"></animate>
        </rect>
    </svg>


    文字的动画


    <svg>
        <g transform="translate(0,20)">
            <text id="textRun" x="0" y="0">
                test text run
                <animateMotion path="M 0 0 L 100 100" dur="3s" />
            </text>
        </g>
    </svg>
</body>

</html>